<template>
    <div>
        <h2>显示</h2>
        <a href="/Add">添加</a>
        <table>
            <thead>
                <tr>
                    <td>会员名称</td>
                    <td>等级名称</td>
                    <td>等级状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data"> 
                <!-- 使用 v-for 指令遍历 data 数组，为数组中的每个元素生成一行 -->
                    <td>{{a.Name}}</td>
                    <td>{{a.VipName }}</td>
                    <td>{{a.Vip==true?"启用":"禁用"}}</td>
                    <!-- 根据 a.Vip 的布尔值显示“启用”或“禁用” -->
                    <td>{{a.Time}}</td>
                    <td>
                        <input type="button" value="删除" @click="Del(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios'

const data = ref([{
"Id": 0,   
"Name": "",
"VipName": "",
"Vip": true,
"Time": ""
}])

const getdata=()=>{
    // 发送 GET 请求到指定的 API 地址
    axios.get("https://localhost:7034/api/Vip/GetVipList").then(res=>{
        // 将响应数据赋值给 data 的 value 属性，更新页面显示
        data.value=res.data;
    })
}

// onMounted 是一个生命周期钩子，在组件挂载到 DOM 后执行
onMounted(()=>{
    // 调用 getdata 函数获取数据
    getdata();
})

const Del=(Id:Number)=>{
//// 定义名为 Del 的箭头函数，接收一个名为 Id 的参数，类型为 Number
    if(confirm("确认删除吗")){
        axios.get("https://localhost:7034/api/Vip/DelVip",{params:{Id:Id}}).then(res=>{
        //// 向指定的 API 地址发送 GET 请求，传递参数 Id。使用 then 方法处理请求成功后的响应
        if(res.data>0){
            alert("删除成功");
            getdata();//重新调用一次显示
        }
        else{
            alert("删除失败");
           
        }
    })
    }
    
}

</script>

<style scoped>

</style>